<template>
  <div class="discussion-section">
    <div class="discussion-part">
      <div class="part-title">课程讨论</div>

      <div class="part" v-for="discussion in discussions" :key="discussion.id">
        <div class="discussion" @click="gotoDiscussionDetail(discussion.id)">
          <div class="discussion-info">
            <div class="discussion-title">{{ discussion.title }}</div>
            <div class="discussion-owner">
              <span class="nickname">{{ discussion.owner }}</span>
              <span>发表于 {{ discussion.gmtCreate | gmtToDate}}</span>
            </div>
          </div>
          <div class="discussion-status" v-if="discussion.ifTeacherParticipate">教师参与</div>
          <div class="discussion-reply">回复：{{ discussion.commentCount }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "LearnDiscussionListView",
  filters: {
    gmtToDate(gmt) {
      let fmt = "YYYY-mm-dd HH:MM";
      let date = new Date(parseInt(gmt));
      let ret;
      const opt = {
        "Y+": date.getFullYear().toString(), // 年
        "m+": (date.getMonth() + 1).toString(), // 月
        "d+": date.getDate().toString(), // 日
        "H+": date.getHours().toString(), // 时
        "M+": date.getMinutes().toString(), // 分
        "S+": date.getSeconds().toString(), // 秒
        // 有其他格式化字符需求可以继续添加，必须转化成字符串
      };
      for (let k in opt) {
        ret = new RegExp("(" + k + ")").exec(fmt);
        if (ret) {
          fmt = fmt.replace(
              ret[1],
              ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, "0")
          );
        }
      }
      return fmt;
    }
  },
  data() {
    return {
      discussions: []
    }
  },
  mounted() {
    this.getCourseDiscussionList(this.$route.params.courseId)
  },
  methods: {
    getCourseDiscussionList(courseId) {
      this.loading = true;
      this.$api
        .getCourseDiscussionList({courseId})
        .then((res) => {
          this.discussions = res.data.data
        })
    },
    gotoDiscussionDetail(id) {
      this.$router.push({
        name: 'learn-discussion-detail',
        params: {
          discussionId: id
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">

.part, .part-title {
  margin-bottom: 20px;
}

.discussion {
  position: relative;
  padding: 10px;
  border-radius: 10px;
  background: #f6f6f6;
  font-size: 14px;
  color: #888;
  cursor: pointer;
}

.discussion-title {
  font-size: 18px;
  margin-bottom: 10px;
  color: black;
}

.nickname {
  color: #357FF8;
  margin-right: 10px;
}

.discussion-status, .discussion-reply {
  position: absolute;
  right: 10px;
}
.discussion-status{
  top: 10px;
  color: #8EB9FF;
  border: 1px solid #8EB9FF;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 5px;
}
.discussion-reply{
  bottom: 10px;
}

</style>
